<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%
	pageContext.setAttribute("msg",request.getContextPath());
 %>
<!DOCTYPE html>
<html>
<head>
<base href="${msg}/" />
<meta charset="UTF-8">
<title>Insert title here</title>

<link href="bootstrap-3.3.5/css/bootstrap.min.css"  rel="stylesheet">
<link href="bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet"></link>

<script src="jquery/jquery-1.10.2.min.js"></script>

<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="bootstrapvalidator/js/bootstrapValidator.js"></script>
<style>
	.b{}
	.bb{}
	.clear{}
	.refresh{}
</style>
</head>

<body>

<div class="page-header">
<h1><small>审批流程</small></h1>

<!-- 面板通知 -->
<div class="alert alert-warning alert-dismissible" style="display:none;" id="after" role="alert">
操作成功 !
</div>
</div>

<ol class="breadcrumb">
  <li><button type="button" class="btn btn-link clear" data-toggle="modal" data-target="#myModal">
添加流程
</button></li>
  <li><a href="#">BootStrap </a></li>
  <li class="active">操作流程</li>
</ol>


<div class="container refresh">
    <div class="row">
        <div class="col-xs-12 ">

<table class="table table-hover table-striped" id="tab">
			<thead>
				<th class="success">批量选择</th>
				<th class="success">流程名称</th>
				<th class="success">单据类型</th>
				<th class="success">流程描述</th>
				<th class="success">流程状态</th>
				<th class="success">流程操作</th>
			</thead>
			
				<c:forEach items="${flowList}" var="flow">
					<tr>
						<td>
							<input type="checkbox"  value="${flow.oid }" name="ck"/>
	        			</td>
						<td>${flow.flowName }</td>
						
						<td>${flow.docType }</td>
						
						<td>${flow.info }</td>
						
						<td>
							
							<c:if test="${flow.state=='s'}">
						
									<span class="text-warning"><button type="button" myOid="${flow.oid}" class="btn btn-link bb">
										禁用
									</button></span>
									
							</c:if>
							
							<c:if test="${flow.state=='m'}">
														
								<span class="text-warning"><button type="button" myOid="${flow.oid}" class="btn btn-link bb">
										启用
								</button></span>
							</c:if>
							
						</td>
						
						<td>
							<c:choose>
								<c:when test="${flow.state=='m'}">
									<span class="text-warning"><button type="button" myvalue="${flow.oid}" class="btn btn-link b"  data-toggle="modal" data-target="#myModal">
										编辑流程
									</button></span><a href="node/showView?oid=${flow.oid }&approvalName=${flow.flowName}">查看审批节点</a>
								</c:when>
								<c:when test="${flow.state=='s'}">
									<span class="text-success">&nbsp; &nbsp; 正在使用 </span> &nbsp;  <a href="node/showView?oid=${flow.oid }&approvalName=${flow.flowName}">查看审批节点</a>
								</c:when>
							</c:choose>
						</td>
					
					</tr>
				</c:forEach>
			</table>
			<button type="button" class="btn btn-warning" id="removeAr">删除流程</button>
		 </div>
    </div>
</div>

<form action="ar/saveOrUpdate" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
				         <div class="modal-content">
				          <div class="modal-header">
				            <button data-dismiss="modal" class="close" type="button">×<span class="sr-only">Close</span></button>
				            <h4 class="modal-title">流程操作 save Or Update</h4>
				          </div>
				          <div class="modal-body">
				            
						<table class="table table-bordered">
								 <tr>
									<td>单据类型</td>
				            		<td>
				            			<select name="docType" id="docType">
				            				<option value="报销申请">报销申请</option>
				            				<option value="资产移动申请">资产移动申请</option>
				            				<option value="资产购买申请">资产购买申请</option>
				            			</select>
				            		</td>
								 </tr>
								 <tr>
				            		<td>流程名称</td>
				            		<td><input type="text" class="form-control"  name="flowName" /></td>
								 </tr>
								 <tr>
				            		<td>流程描述</td>
				            		<td><textarea class="form-control" name="info"></textarea></td> 
								 </tr>
						</table>
				          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="submit">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>
 
<div style="height:200px"></div>
</form>
</body>
</html>
<script>

	$(function(){
	
	//修改默认填充
		
	$(".b").click(function(){
			
			var id=$(this).attr("myvalue");
			
			$.ajax({
				
				url:"ar/editApproval",
				type:"POST",
				data:{
					oid:id   
				},
				
				success:function(data){
					 
					        $("select[name=docType]").children("option").each(function () {
					        	
						           //console.log(this.index);
						           // console.log($(this).text());//每一个option
						           
					            if ($(this).text() ==data.docType) {
					                $("select[name=docType]").find('option:eq('+this.index+')').attr('selected', true);
					            }
					        });
						
						$("input[name='flowName']").val(data.flowName);
						$("textarea[name='info']").val(data.info);

				}	
			});
			
			$(".clear").click(function(){
				
				$("select[name=docType]").find('option:eq(0)').attr('selected', true);
				$("input[name='flowName']").val(this.defaultValue);
				$("textarea[name='info']").val(this.defaultValue);
				
				
			});
			
		});

	//禁用 or 启用
	
			$(".bb").click(function(){
				
				var id = $(this).attr("myOid");
				
				$.ajax({
					
					url:"ar/status",
					type:"POST",
					data:{
						oid:id   
					},
				
					success:function(){
	
							afterInfo();
							
							//setInterval(function() {
							  // $("#tab").load(location.href+" #tab>*","");
							//}, 1000);
							
							//location.reload();  //刷新全页面
							//location.href = location.href;
						    
					}
				});
			
				return false;
			});
			
			//复选框选中的值
		
			var checked_value=[];
			
			$("#removeAr").click(function(){
				 $("input[name='ck']:checked").each(function(){					 
					 
					 checked_value.push($(this).val());   //追加数据到数组

				 });
			
				// alert(checked_value);
				
				 //向后台提交数组 批量删除 
				 $.ajax({
						url:"ar/reomveApproval",
						type:"POST",
						data:{
							checked_array:checked_value
						},
					
						success:function(){
							
							afterInfo();
							
						}
				 });

				 checked_value=[];
				
			});
	});
	
	function afterInfo(){    //提示通知
		
		
		
		//jquery动态效果   潜入通知
		
		$("#after").fadeToggle();
		
		   //判断计时器是否处于关闭状态 start
		var time=0;
	    if (time == 0) {
	        time = 2; //设定间隔时间（秒）
	 
	        //启动计时器，倒计时time秒后自动关闭计时器。
	        var index = setInterval(function(){
	            time--;
	            if (time == 0) {
	                clearInterval(index);
	            }
	        }, 5000);
	        
	    } //end 
		
	    $("#after").fadeToggle();
	    
	    
	    location.reload();  //刷新全页面
	}

</script>